<template>
  <div>
    <div>
      <h2>话题：{{title}}</h2>
      <h2>关键词：{{keyword}}</h2>
    </div>
    <div style="width: 1200px; height: 400px" id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      currentId: "",
      currentData: [],
      title: "",
      keyword: ""
    }
  },
  methods: {
    loadData(id) {
      this.$http("/hot-info/today?infoId=" + id + "&currentDate=" + this.$store.state.currentDate).then((response) => {
        if (response.data.code !== 0) {
          this.$message.error(response.data.msg);
          return;
        }
        this.currentData = response.data.data;
        this.loadChart(this.currentData);
        this.title = this.currentData[0].title;;
        this.keyword = this.currentData[0].keyword;
      });
    },
    loadChart(dataList) {
      let x = [];
      let y = [];

      for (let i = 0; i < dataList.length; i++) {
        // 设置X轴的坐标
        x.push(dataList[i].currentHour);
        // 设置Y轴的值
        y.push(dataList[i].answerCount);

      }
      // 设置柱状图的option
      let option = {
        title: {
          text: "回答数量",
        },
        tooltip: {},
        xAxis: {
          name: "时",
          data: x,
          axisLabel: {
            show: true,
            interval: 0
          }
        },
        yAxis: {
          name: "条",
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: "热点词",
            type: "line",
            data: y,
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    }
  },
  mounted() {
    this.currentId = this.$route.query.id;
    if (this.currentId != null) {
      this.loadData(this.currentId);
    }

  }
}
</script>
